<script setup>
import { useUserStore } from '@/stores'

const userList = useUserStore().userList
console.log(userList[0])
</script>
<template>
  <div class="my-view">
    <div class="my-view-bg"></div>
    <div class="my-view-content">
      <div class="my-view-img">
        <img src="https://pic3.zhimg.com/80/v2-c169c7df6d59897ac7e4b8b926632cde_720w.webp" alt="" />
      </div>
      <div class="my-view-name">
        <p>zhangsan</p>
        <p>ID: 1234567890</p>
      </div>
      <div class="my-view-youhui">
        <div class="my-view-youhui-item">
          <p>红包</p>
          <p>123</p>
        </div>
        <div class="my-view-youhui-item">
          <p>优惠券</p>
          <p>123</p>
        </div>
        <div class="my-view-youhui-item">
          <p>红豆</p>
          <p>123</p>
        </div>
        <div class="my-view-youhui-item">
          <p>白条</p>
          <p>1000</p>
        </div>
      </div>
    </div>
    <div class="list">
      <!-- 功能列表 -->
      <div class="list_item">
        <span class="iconfont list_item_icon list_item_wallet">&#xe631;</span>
        <div class="list_item_message">我的钱包</div>
        <span class="iconfont list_item_arrow">&#xe8f1;</span>
      </div>
      <div class="list_item" @click="$router.push({ path: '/address', query: { id: '000001' } })">
        <span class="iconfont list_item_icon list_item_address">&#xe60d;</span>
        <div class="list_item_message">我的地址</div>
        <span class="iconfont list_item_arrow">&#xe8f1;</span>
      </div>
      <div class="list_item">
        <span class="iconfont list_item_icon list_item_help">&#xe616;</span>
        <div class="list_item_message">客服与帮助</div>
        <span class="iconfont list_item_arrow">&#xe8f1;</span>
      </div>
    </div>
    <div class="logout" @click="logout">退出登录</div>
  </div>
</template>
<style scoped lang="scss">
@import '@/style/viriables.scss';

.my-view {
  height: 100vh;
  width: 100vw;

  &-bg {
    width: 98vw;
    height: 30vh;
    margin: 0 auto;
    background: linear-gradient(to right, #0091ff70, $btn-bgColor);
    border-radius: 15px 15px 80px 80px;
    margin-top: 3px;
    box-shadow: 0px 0px 4px #ddd;
  }

  &-content {
    width: 90%;
    height: 30%;
    margin: 0 auto;
    margin-top: -15vh;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 4px #ddd;

    .my-view-img {
      text-align: center;
      height: 80px;

      img {
        width: 30vw;
        aspect-ratio: 1/1;
        border-radius: 100%;
        transform: translateY(-50%);
      }
    }

    .my-view-name {
      text-align: center;

      p {
        margin: 0;
      }

      & :first-child {
        font-size: 35px;
      }

      & :last-child {
        margin-top: 3px;
        font-size: 15px;
        color: #999;
      }
    }

    .my-view-youhui {
      text-align: center;
      display: flex;
      padding: 10px;
      margin-top: 10px;
      border-top: 1px solid #ddd;

      &-item {
        width: 25%;
        text-align: center;

        & p {
          margin: 0;
          height: 50%;
        }

        & :first-child {
          color: #999;
          font-size: 12px;
        }

        & :last-child {
          margin-top: 3px;
          font-size: 25px;
        }
      }
    }
  }
}

.list {
  width: 95%;
  margin: 20px auto;
  border-radius: 0.08rem;
  box-shadow: 0 0 0.16rem 0.08rem rgba(0, 0, 0, 0.08);

  &_item {
    display: flex;
    align-items: center;
    padding: 0.12rem 0.16rem;
    //图标
    &_icon {
      font-size: 0.16rem;
      padding: 0.03rem;
      color: $bgColor;
      border-radius: 0.08rem;
      margin-right: 0.16rem;
    }
    // 钱包
    &_wallet {
      background-color: #ed4a47;
    }
    // 地址
    &_address {
      background-color: #32c5ff;
    }
    //客服与帮助
    &_help {
      background-color: #9013fe;
    }
    //文字
    &_message {
      flex: 1;
      font-size: 0.14rem;
    }
  }
}

.logout {
  margin: 0.18rem;
  line-height: 0.32rem;
  background-color: $btn_bgColor;
  color: $bgColor;
  text-align: center;
  border-radius: 0.04rem;
}
</style>